<template>
  <div id="CSSSkill" class="">

    <div class="item1" style="margin: .3rem 0;">item</div>


    <ul class="item2" style="margin: .3rem 0;">
      <li>AAAAAAAA</li>
      <li>BBBBBBBB</li>
      <li>CCCCCCCC</li>
    </ul>


    <div class="Title" style="margin: .3rem 0;">
      <h1>Title</h1>
      <h2>这是一段内容。</h2>
      <h2>这是一段内容。</h2>
      <h1>Title</h1>
      <h2>这是一段内容。</h2>
      <h1>Title</h1>
      <h2>这是一段内容。</h2>
      <h2>这是一段内容。</h2>
      <h2>这是一段内容。</h2>
    </div>


    <div style="margin: .3rem 0;">
      CSS3<input class="checkNum" type="checkbox">
      HTML5<input class="checkNum" type="checkbox">
      Javascript<input class="checkNum" type="checkbox">
      <p class="p1">你一共选择了</p>
    </div>


    <div class="checkNum1" style="margin: .3rem 0;">
      5<input type="checkbox">
      2<input type="checkbox">
      7<input type="checkbox">
      1<input type="checkbox">
      <p class="p2"></p>
    </div>

    <div class="cssvar">CSS 变量教程</div>

  </div>
</template>

<script>
  export default {
    name: 'CSSSkill',
    data() {
      return {
        showLoading: true
      }
    },
    mounted() {
      //检测是否支持CSS变量 阮一峰：http://www.ruanyifeng.com/blog/2017/05/css-variables.html
      const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);

      if (isSupported) {
        alert('supported');
      } else {
        alert('not supported');
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>

  #CSSSkill{
    font-size: .16rem;
    text-align: center;
  }

  /*::before用来将内容插入到元素的前面*/
  /*::after用来将内容插入到元素的后面*/
  /*::before和::after中有一个content()属性用来生成内容。*/
  .item1::before{
    content : 'Hello ';
  }
  .item1::after{
    content : " world"
  }


  /*CSS有一个计数功能，就像使用变量一样，它有以下4个属性：*/
  /*  counter-reset   创建或重置计数器；需要注意的是：当第一次使用counter-reset时，表示创建；当第二次使用时，表示重置，但需要注意的是，是同一个元素才会重置。*/
  /*  counter-increment   增长计数器；*/
  /*  content 生成内容；*/
  /*  counter()   将计数器的值添加到元素中。 */
  /*  接下来，看一个最简单的计数器示例：*/
  .item2{
    list-style:none;
    counter-reset : num;
  }
  .item2 li::before{
    counter-increment : num;
    content : 'List-'  counter(num)  '-item ';
  }


  .Title{
    counter-reset : num1;
  }
  .Title h1::before{
    counter-increment : num1;
    content : 'The ' counter(num1) ' ';
  }
  .Title h1{
    counter-reset : num2;
  }
  .Title h2::before{
    counter-increment : num2;
    content : 'content ' counter(num1) '.' counter(num2);
  }


  /*利用计数器来实现获取input checked选择的数量。*/
  .checkNum:checked{
    counter-increment : num3;
  }
  .p1::after{
    content : counter(num3) '个'
  }


  checkNum1{
    counter-reset : num4;
  }
  .checkNum1 input:nth-of-type(1):checked{
    counter-increment : num4 5;
  }
  .checkNum1 input:nth-of-type(2):checked{
    counter-increment: num4 2;
  }
  .checkNum1 input:nth-of-type(3):checked{
    counter-increment:num4 7;
  }
  .checkNum1 input:nth-of-type(4):checked{
    counter-increment: num4 1;
  }
  .p2::after{
    content : 'Count: ' counter(num4)
  }

  .cssvar{
    font-size: var(--fontsize20);
    margin: var(--margin);
  }
</style>
